<script setup>
import { RouterLink } from 'vue-router'
import ExComponent from '../components/exComponent.vue'
</script>

<template>
  <!-- 教学导航区域 -->
  <div class="teaching-nav">
    <h2 class="nav-title">Vue 教学导航</h2>
    
    <!-- 基础页面 -->
    <div class="nav-section">
      <h3 class="section-title">基础页面</h3>
      <div class="nav-buttons">
        <RouterLink to="/" class="nav-btn primary">Home</RouterLink>
        <RouterLink to="/about" class="nav-btn primary">About</RouterLink>
      </div>
    </div>

    <!-- 生命周期 -->
    <div class="nav-section">
      <h3 class="section-title">生命周期</h3>
      <div class="nav-buttons">
        <RouterLink to="/life" class="nav-btn secondary">Life Cycle</RouterLink>
        <RouterLink to="/life2" class="nav-btn secondary">Life Cycle2</RouterLink>
        <RouterLink to="/life3" class="nav-btn secondary">Life Cycle3</RouterLink>
        <RouterLink to="/beforeMount" class="nav-btn secondary">onBeforeMountView</RouterLink>
        <RouterLink to="/mounted" class="nav-btn secondary">onMountedView</RouterLink>
        <RouterLink to="/beforeUpdate" class="nav-btn secondary">onBeforeUpdateView</RouterLink>
        <RouterLink to="/updated" class="nav-btn secondary">onUpdatedView</RouterLink>
        <RouterLink to="/beforeUnmount" class="nav-btn secondary">onBeforeUnmountView</RouterLink>
        <RouterLink to="/unmounted" class="nav-btn secondary">onUnmountedView</RouterLink>
      </div>
    </div>

    <!-- 组件通信 -->
    <div class="nav-section">
      <h3 class="section-title">组件通信</h3>
      <div class="nav-buttons">
        <RouterLink to="/fu" class="nav-btn success">父组件</RouterLink>
        <RouterLink to="/zi" class="nav-btn success">子组件</RouterLink>
        <RouterLink to="/parent-child" class="nav-btn success">父子组件</RouterLink>
        <RouterLink to="/slot-learn" class="nav-btn success">插槽学习</RouterLink>
        <RouterLink to="/perf" class="nav-btn success">性能</RouterLink>
        <RouterLink to="/selfdef" class="nav-btn success">自定义</RouterLink>
        <RouterLink to="/composition-vs-options" class="nav-btn success">Composition vs Options</RouterLink>
        <RouterLink to="/person" class="nav-btn success">Person</RouterLink>
        <RouterLink to="/personnn" class="nav-btn success">Personnn</RouterLink>
      </div>
    </div>

    <!-- 教程系列 -->
    <div class="nav-section">
      <h3 class="section-title">教程系列 (TTF)</h3>
      <div class="nav-buttons">
        <RouterLink to="/ttf1" class="nav-btn info">TTF1</RouterLink>
        <RouterLink to="/ttf2" class="nav-btn info">TTF2</RouterLink>
        <RouterLink to="/ttf3" class="nav-btn info">TTF3</RouterLink>
        <RouterLink to="/ttf4" class="nav-btn info">TTF4</RouterLink>
        <RouterLink to="/ttf5" class="nav-btn info">TTF5</RouterLink>
        <RouterLink to="/ttf6" class="nav-btn info">TTF6</RouterLink>
        <RouterLink to="/ttf7" class="nav-btn info">TTF7</RouterLink>
        <RouterLink to="/ttf8" class="nav-btn info">TTF8</RouterLink>
        <RouterLink to="/ttf9" class="nav-btn info">TTF9</RouterLink>
        <RouterLink to="/ttf10" class="nav-btn info">TTF10</RouterLink>
        <RouterLink to="/ttf11" class="nav-btn info">TTF11</RouterLink>
        <RouterLink to="/ttf12" class="nav-btn info">TTF12</RouterLink>
        <RouterLink to="/ttf13" class="nav-btn info">TTF13</RouterLink>
        <RouterLink to="/ttf14" class="nav-btn info">TTF14</RouterLink>
        <RouterLink to="/ttf15" class="nav-btn info">TTF15</RouterLink>
        <RouterLink to="/ttf16" class="nav-btn info">TTF16</RouterLink>
        <RouterLink to="/ttf17" class="nav-btn info">TTF17</RouterLink>
        <RouterLink to="/ttf18" class="nav-btn info">TTF18</RouterLink>
        <RouterLink to="/ttf19" class="nav-btn info">TTF19</RouterLink>
        <RouterLink to="/ttf20" class="nav-btn info">TTF20</RouterLink>
        <RouterLink to="/ttf21" class="nav-btn info">TTF21</RouterLink>
        <RouterLink to="/ttf23" class="nav-btn info">TTF23</RouterLink>
        <RouterLink to="/ttf24" class="nav-btn info">TTF24</RouterLink>
        <RouterLink to="/ttf25" class="nav-btn info">TTF25</RouterLink>
        <RouterLink to="/ttf26" class="nav-btn info">TTF26</RouterLink>
        <RouterLink to="/ttf27" class="nav-btn info">TTF27</RouterLink>
        <RouterLink to="/ttf28" class="nav-btn info">TTF28</RouterLink>
        <RouterLink to="/ttf29" class="nav-btn info">TTF29</RouterLink>
        <RouterLink to="/ttf30" class="nav-btn info">TTF30</RouterLink>
      </div>
    </div>

    <!-- 组件学习 -->
    <div class="nav-section">
      <h3 class="section-title">组件学习</h3>
      <div class="nav-buttons">
        <RouterLink to="/component-learning" class="nav-btn primary">组件学习主页</RouterLink>
        <RouterLink to="/component-basics" class="nav-btn secondary">组件注册与使用</RouterLink>
        <RouterLink to="/component-communication" class="nav-btn success">组件通信</RouterLink>
        <RouterLink to="/component-slots" class="nav-btn info">插槽教程</RouterLink>
        <RouterLink to="/component-switching" class="nav-btn warning">组件切换</RouterLink>
        <RouterLink to="/builtin-components" class="nav-btn primary">内置组件</RouterLink>
      </div>
    </div>

    <!-- UI 组件库：Element Plus 教程 -->
    <div class="nav-section">
      <h3 class="section-title">UI 组件库</h3>
      <div class="nav-buttons">
        <RouterLink to="/element-plus/counter" class="nav-btn info">Element Plus 组件计数</RouterLink>
      </div>
    </div>

    <!-- 混入 Mixins 学习 -->
    <div class="nav-section">
      <h3 class="section-title">混入 Mixins 学习</h3>
      <div class="nav-buttons">
        <RouterLink to="/mixins" class="nav-btn primary">混入（Mixins）完整示例</RouterLink>
      </div>
    </div>

    <!-- 状态管理 Pinia 学习 -->
    <div class="nav-section">
      <h3 class="section-title">状态管理（Pinia）</h3>
      <div class="nav-buttons">
        <RouterLink to="/pinia/tutorial" class="nav-btn primary">Pinia 状态管理教程</RouterLink>
      </div>
    </div>

    <!-- 计算属性学习 -->
    <div class="nav-section">
      <h3 class="section-title">计算属性学习</h3>
      <div class="nav-buttons">
        <RouterLink to="/jisuan" class="nav-btn primary">计算属性基础</RouterLink>
        <RouterLink to="/jisuan01" class="nav-btn primary">响应式数据绑定</RouterLink>
        <RouterLink to="/jisuan02" class="nav-btn primary">数组过滤排序</RouterLink>
        <RouterLink to="/jisuan03" class="nav-btn primary">条件渲染样式</RouterLink>
        <RouterLink to="/jisuan04" class="nav-btn primary">缓存与通信</RouterLink>
      </div>
    </div>

    <!-- 侦听器学习 -->
    <div class="nav-section">
      <h3 class="section-title">侦听器学习</h3>
      <div class="nav-buttons">
        <RouterLink to="/zhenting" class="nav-btn secondary">侦听器基础</RouterLink>
        <RouterLink to="/zhenting01" class="nav-btn secondary">表单验证</RouterLink>
        <RouterLink to="/zhenting02" class="nav-btn secondary">异步操作状态</RouterLink>
        <RouterLink to="/zhenting03" class="nav-btn secondary">多字段侦听</RouterLink>
      </div>
    </div>

    <!-- 样式绑定学习 -->
    <div class="nav-section">
      <h3 class="section-title">样式绑定学习</h3>
      <div class="nav-buttons">
        <RouterLink to="/yangshi01" class="nav-btn warning">Class 绑定</RouterLink>
        <RouterLink to="/yangshi02" class="nav-btn warning">Style 绑定</RouterLink>
        <RouterLink to="/yangshi03" class="nav-btn warning">动态样式绑定</RouterLink>
      </div>
    </div>

    <!-- 过渡动画学习 -->
    <div class="nav-section">
      <h3 class="section-title">过渡动画学习</h3>
      <div class="nav-buttons">
        <RouterLink to="/guodu" class="nav-btn primary">🌟 综合动画演示</RouterLink>
        <RouterLink to="/guodu01" class="nav-btn info">基础过渡动画</RouterLink>
        <RouterLink to="/guodu02" class="nav-btn info">滑动过渡动画</RouterLink>
        <RouterLink to="/guodu03" class="nav-btn info">缩放过渡动画</RouterLink>
        <RouterLink to="/guodu04" class="nav-btn info">旋转过渡动画</RouterLink>
        <RouterLink to="/guodu05" class="nav-btn info">列表过渡动画</RouterLink>
      </div>
    </div>
    
    <!-- 路由与过渡动画教程 -->
    <div class="nav-section">
      <h3 class="section-title">路由与过渡动画教程</h3>
      <div class="nav-buttons">
        <!-- 路由基础与守卫 -->
        <RouterLink to="/luyou/static" class="nav-btn secondary">静态路由</RouterLink>
        <RouterLink to="/luyou/dynamic" class="nav-btn secondary">动态路由</RouterLink>
        <RouterLink to="/luyou/params" class="nav-btn secondary">路由传参</RouterLink>
        <RouterLink to="/luyou/guard-global" class="nav-btn warning">全局前置守卫</RouterLink>
        <RouterLink to="/luyou/guard-per-route" class="nav-btn warning">路由独享守卫</RouterLink>
        <RouterLink to="/luyou/guard-in-component" class="nav-btn warning">组件内守卫</RouterLink>

        <!-- 过渡动画专项 -->
        <RouterLink to="/luyou/transition-gradient" class="nav-btn info">渐变过渡</RouterLink>
        <RouterLink to="/luyou/transition-slide" class="nav-btn info">幻灯片过渡</RouterLink>
        <RouterLink to="/luyou/transition-zoom" class="nav-btn info">缩放过渡</RouterLink>
        <RouterLink to="/luyou/transition-rotate" class="nav-btn info">旋转过渡</RouterLink>
        <RouterLink to="/luyou/transition-custom" class="nav-btn info">自定义过渡</RouterLink>
      </div>
    </div>
    
    <!-- 备份知识点预览（展示原 App.vue 页面） -->
    <div class="nav-section">
      <h3 class="section-title">备份知识点预览（路由）</h3>
      <div class="nav-buttons">
        <RouterLink to="/backup-app/024" class="nav-btn primary">024 基本切换效果</RouterLink>
        <RouterLink to="/backup-app/025" class="nav-btn primary">025 两个注意点</RouterLink>
        <RouterLink to="/backup-app/026" class="nav-btn primary">026 路由器工作模式</RouterLink>
        <RouterLink to="/backup-app/027" class="nav-btn primary">027 to 的两种写法</RouterLink>
        <RouterLink to="/backup-app/028" class="nav-btn primary">028 命名路由</RouterLink>
        <RouterLink to="/backup-app/029" class="nav-btn primary">029 嵌套路由</RouterLink>
        <RouterLink to="/backup-app/030" class="nav-btn primary">030 query 参数</RouterLink>
        <RouterLink to="/backup-app/031" class="nav-btn primary">031 params 参数</RouterLink>
        <RouterLink to="/backup-app/032" class="nav-btn primary">032 props 配置</RouterLink>
        <RouterLink to="/backup-app/033" class="nav-btn primary">033 replace 属性</RouterLink>
        <RouterLink to="/backup-app/034" class="nav-btn primary">034 编程式导航</RouterLink>
        <RouterLink to="/backup-app/035" class="nav-btn primary">035 重定向</RouterLink>
      </div>
    </div>
    <!-- 组合式 API 学习 -->
    <div class="nav-section">
      <h3 class="section-title">组合式 API 学习</h3>
      <div class="nav-buttons">
        <RouterLink to="/zuheapi/options" class="nav-btn success">选项式 API 示例</RouterLink>
        <RouterLink to="/zuheapi/composition" class="nav-btn success">组合式 API 示例</RouterLink>
      </div>
    </div>

    <!-- 组合式 API 进阶 -->
    <div class="nav-section">
      <h3 class="section-title">组合式 API 进阶</h3>
      <div class="nav-buttons">
        <RouterLink to="/zuheapi/reactive" class="nav-btn info">reactive 基础</RouterLink>
        <RouterLink to="/zuheapi/setup" class="nav-btn info">setup 函数</RouterLink>
        <RouterLink to="/zuheapi/setup-props-context" class="nav-btn info">props 与 context</RouterLink>
      </div>
    </div>
    <!-- 其他功能 -->
    <div class="nav-section">
      <h3 class="section-title">其他功能</h3>
      <div class="nav-buttons">
        <RouterLink to="/xiangying" class="nav-btn warning">响应式</RouterLink>
      </div>
    </div>

    <!-- 游戏娱乐 -->
    <div class="nav-section">
      <h3 class="section-title">🎮 游戏娱乐</h3>
      <div class="nav-buttons">
        <RouterLink to="/snake-game" class="nav-btn game">🐍 贪吃蛇游戏</RouterLink>
        <RouterLink to="/tetris-game" class="nav-btn game">🧩 俄罗斯方块</RouterLink>
        <RouterLink to="/breakout-game" class="nav-btn game">🎯 打砖块</RouterLink>
        <RouterLink to="/space-invaders" class="nav-btn game">🚀 太空入侵者</RouterLink>
        <RouterLink to="/plane-war" class="nav-btn game">✈️ 飞机大战</RouterLink>
        <RouterLink to="/match-three" class="nav-btn game">🍭 消消乐</RouterLink>
        <RouterLink to="/sokoban" class="nav-btn game">📦 推箱子</RouterLink>
        <RouterLink to="/2048" class="nav-btn game">🔢 2048 数字拼图</RouterLink>
        <RouterLink to="/minesweeper" class="nav-btn game">💣 扫雷 Minesweeper</RouterLink>
        <RouterLink to="/flappy-bird" class="nav-btn game">🐤 Flappy Bird</RouterLink>
        <RouterLink to="/pong" class="nav-btn game">🏓 Pong 乒乓</RouterLink>
        <RouterLink to="/connect-four" class="nav-btn game">⭕ Connect Four 四子棋</RouterLink>
      </div>
    </div>

    <!-- 组件示例 -->
    <div class="nav-section">
      <h3 class="section-title">组件示例</h3>
      <div class="component-demo">
        <ExComponent title="自定义标题"></ExComponent>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 教学导航样式 */
.teaching-nav {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: white;
}

.nav-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(45deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-section {
  margin-bottom: 25px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
  margin-bottom: 15px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 8px;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-btn {
  display: inline-block;
  padding: 10px 16px;
  margin: 4px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.nav-btn:hover::before {
  left: 100%;
}

/* 主要按钮 - 蓝色系 */
.nav-btn.primary {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
  border-color: #4facfe;
}

.nav-btn.primary:hover {
  background: linear-gradient(45deg, #00f2fe, #4facfe);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

/* 次要按钮 - 紫色系 */
.nav-btn.secondary {
  background: linear-gradient(45deg, #a8edea, #fed6e3);
  color: #333;
  border-color: #a8edea;
}

.nav-btn.secondary:hover {
  background: linear-gradient(45deg, #fed6e3, #a8edea);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 237, 234, 0.4);
}

/* 成功按钮 - 绿色系 */
.nav-btn.success {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  color: white;
  border-color: #56ab2f;
}

.nav-btn.success:hover {
  background: linear-gradient(45deg, #a8e6cf, #56ab2f);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(86, 171, 47, 0.4);
}

/* 信息按钮 - 青色系 */
.nav-btn.info {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
}

.nav-btn.info:hover {
  background: linear-gradient(45deg, #764ba2, #667eea);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 警告按钮 - 橙色系 */
.nav-btn.warning {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  color: white;
  border-color: #f093fb;
}

.nav-btn.warning:hover {
  background: linear-gradient(45deg, #f5576c, #f093fb);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

/* 游戏按钮 - 彩虹渐变 */
.nav-btn.game {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
  background-size: 400% 400%;
  color: white;
  border-color: #ff6b6b;
  font-weight: bold;
  animation: rainbow 3s ease infinite;
  position: relative;
  overflow: hidden;
}

.nav-btn.game::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.nav-btn.game:hover::before {
  left: 100%;
}

.nav-btn.game:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5);
}

@keyframes rainbow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 激活状态 */
.nav-btn.router-link-active {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: #fff;
}

/* 组件示例区域 */
.component-demo {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-buttons {
    flex-direction: column;
  }
  
  .nav-btn {
    min-width: 100%;
    margin: 2px 0;
  }
  
  .nav-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .teaching-nav {
    padding: 15px;
  }
  
  .nav-section {
    padding: 15px;
  }
  
  .nav-title {
    font-size: 1.8rem;
  }
}
</style>
